<!-- 扭蛋 -->
<template>
    <view class="page" :style="{backgroundImage:'url(' + imgUrl + 'egg_bg.png' + ')'}">
        <view class="time flexac f-column auto" :style="{backgroundImage:'url(' + imgUrl + 'egg_time.png' + ')'}">
            <view class="size32">活动时间</view>
            <view class="size32">2023.9.16-2023.9.20</view>
        </view>
        <view class="p-re">
            <image :src="imgUrl + 'egg_machine.png'" mode="widthFix"></image>
            <view class="container p-ab">
                <image :src="imgUrl + 'egg_container.png'" mode="widthFix"></image>
                <image :src="imgUrl + 'small_ball.png'" mode="widthFix" class="ball p-ab" v-for="(item,index) in position" :key="index"
                    :style="{left: item.x, bottom: item.y}"></image>
            </view>
            <image :src="imgUrl + 'egg_play.png'" mode="widthFix" class="play p-ab" @click="handlePlay"></image>
        </view>
        <view class="winners auto padding40-30">
            <view class="title size30 white t-letter4 flexac auto m-bot20">获奖信息</view>
            <swiper class="swiper" autoplay vertical circular disable-touch>
                <swiper-item v-for="item in 2" :key="item">     
                    <view v-for="itm in 4" :key="itm" class="d-flex a-center m-bot20">
                        <view class="d-flex a-center p-right10" style="width: 220rpx;">
                            <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill" class="avatar bor_radius f-shrink-0"></image>
                            <text class="h6 m-left10 ellipsis">用户名</text>
                        </view>
                        <text class="size22 flex-1 ellipsis">积分（直接到帐）</text>
                        <text class="size22 flex-1 text-right ellipsis">2023-08-30</text>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <!-- 中奖提示 -->
        <u-overlay :show="showResult" @click="showResult = false">
            <view class="flexac f-column height t-letter4">
			    <view class="result bor_radius_18 m-bot50 p-re" @tap.stop>
                    <view class="wh bgwhite bor_radius_20 p-top60 p-bot60 d-flex f-column j-sb a-center">
                        <view class="size38 black bold">恭喜扭出积分</view>
                        <view class="prize size32"><text class="size48 bold m-right10">30</text>积分</view>
                        <view class="h6 color_66">活动结束后1天内直接到账</view>
                    </view>
                    <image :src="imgUrl + 'open_ball.png'" mode="widthFix" class="open p-ab"></image>
                </view>
                <view class="btn flexac size38 bold">开心收下</view>
		    </view>
        </u-overlay>
    </view>
</template>

<script>
export default {
    data() {
        return {
            imgUrl: this.imgUrl + 'Uploads/diy/img/',
            showResult: false, // 中奖提示
            position: [
                { x: '120rpx', y: '30rpx'},
                { x: '180rpx', y: '20rpx'},
                { x: '220rpx', y: '60rpx'},
                { x: '240rpx', y: '20rpx'},
                { x: '160rpx', y: '80rpx'},
                { x: '300rpx', y: '30rpx'},
                { x: '260rpx', y: '72rpx'},
                { x: '204rpx', y: '120rpx'}
            ]
        }
    },
    methods: {
        handlePlay(){
            this.showResult = true
        },
        getRandomNum(min, max){
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 398rpx 0 32rpx 0;
}
.time {
    width: 412rpx;
    height: 140rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: #A74533;
}
.container {
    width: 492rpx;
    top: 124rpx;
    left: 50%;
    margin-left: -246rpx;
    .ball {
        width: 90rpx;
        // left: 120rpx;
        // bottom: 30rpx;
        // animation: move 1s linear infinite;
    }
}
// left: 30-372 bottom: 30-200
// [30,120,210,300]
@keyframes move {
    0% { transform: translate(0, 0) }
    25% { transform: translate(-30rpx, -120rpx) }
    50% { transform: translate(30rpx, -200rpx) }
    75% { transform: translate(120rpx, -120rpx) }
    100% { transform: translate(0, 0) }
}
.play {
    width: 208rpx;
    top: 465rpx;
    left: 50%;
    margin-left: -104rpx;
}
.winners {
    width: 634rpx;
    height: 480rpx; 
    background: #FEFEFE;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    border: 10rpx solid #FFBC52;
    margin-top: -30rpx;
    .title {
        width: 312rpx;
        height: 70rpx;
        background: linear-gradient(0deg, #FB8446, #F31D08);
        border-radius: 35rpx;
    }
    .swiper {
        height: 310rpx;
        color: #DD1809;
        .avatar {
            width: 60rpx;
            height: 60rpx;
        }
    }
}
.result {
    width: 602rpx;
    height: 642rpx;
    background: linear-gradient(50deg, #FE903D, #FF6750);
    border: 4rpx solid #FFFFFF;
    padding: 120rpx 30rpx;
    .open {
        width: 132rpx;
        left: 50%;
        margin-left: -66rpx;
        top: -66rpx;
    }
    .prize {
        color: #FF2929;
    }
}
.btn {
    width: 400rpx;
    height: 90rpx;
    background: #FFDC3A;
    box-shadow: 0rpx 8rpx 0rpx 0rpx #F1A30D, 5rpx 3rpx 6rpx 0rpx #FFFCF5;
    border-radius: 45rpx;
    color: #F03A19;
}
</style>